@use 'normalize';

.reveal-viewport {
  background-color: var(--r-background-color);
}

.reveal {
  @include normalize.normalize;
  color: var(--r-main-color);
  font-size: var(--r-main-font-size);
  font-family: var(--r-main-font);

  @media print {
    .backgrounds {
      background-color: var(--r-background-color);
    }
  }

  ::selection {
    background: var(--r-selection-background-color);
    color: var(--r-selection-color);
    text-shadow: none;
  }

  .slides section {
    &,
    > section {
      font-weight: inherit;
      line-height: 1.3;
    }
  }

  h1 {
    font-size: var(--r-heading1-size);
    text-shadow: var(--r-heading1-text-shadow);
  }

  h2 {
    font-size: var(--r-heading2-size);
  }

  h3 {
    font-size: var(--r-heading3-size);
  }

  h4 {
    font-size: var(--r-heading4-size);
  }

  p {
    margin: var(--r-block-margin) 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: var(--r-heading-margin);

    color: var(--r-heading-color);

    font-weight: var(--r-heading-font-weight);
    font-family: var(--r-heading-font);
    line-height: var(--r-heading-line-height);
    letter-spacing: var(--r-heading-letter-spacing);
    text-transform: var(--r-heading-text-transform);
    text-shadow: var(--r-heading-text-shadow);
    word-wrap: break-word;

    &:last-child {
      margin-bottom: 0;
    }
  }

  blockquote {
    margin: var(--r-block-margin) auto;
  }

  pre {
    margin: var(--r-block-margin) auto;
    font-family: var(--r-code-font);
  }

  code {
    font-family: var(--r-code-font);
  }

  img {
    margin: var(--r-block-margin) 0;
  }

  a {
    color: var(--r-link-color);

    &:hover {
      color: var(--r-link-color-hover);
    }
  }

  .roll span::after {
    background: var(--r-link-color-dark);
    color: #fff;
  }

  .r-frame {
    border: 4px solid var(--r-main-color);
    box-shadow: 0 0 10px rgb(0 0 0 / 15%);
  }

  a .r-frame {
    transition: all 0.15s linear;
  }

  a:hover .r-frame {
    border-color: var(--r-link-color);
    box-shadow: 0 0 20px rgb(0 0 0 / 55%);
  }

  .controls {
    color: var(--r-link-color);
  }

  .progress {
    background: rgb(0 0 0 / 20%);
    color: var(--r-link-color);
  }

  table.hljs-ln {
    display: table;
    width: 100%;

    tr {
      border: none;

      &:nth-child(odd) {
        background: inherit !important;
      }
    }

    td {
      border: none;
    }
  }
}
